import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.导入需要进行路由的组件
import login from '@/views/login/index.vue'
import register from '@/views/register/index.vue'
import layout from '@/views/layout/index.vue'
import detail from '@/views/detail/index.vue'
// 导入二级页面组件
import article from '@/views/article/index.vue'
import collect from '@/views/collect/index.vue'
import like from '@/views/like/index.vue'
import user from '@/views/user/index.vue'

import notFound from '@/views/404.vue'

Vue.use(VueRouter)

// 3.定义路由规则
const routes = [
  // 如果 url没有hash值 就重定向到某个页面组件
  { path: '/', redirect: '/login' },
  { path: '/login', component: login },
  { path: '/register', component: register },
  {
    path: '/layout',
    component: layout,
    children: [
      {
        // 二 三...级路由中的path有两种写法 ：/一级路由/二级路由  或者"二级路由"本身
        path: '/layout/article',
        component: article
      },
      {
        path: 'collect',
        component: collect
      },
      {
        path: 'like',
        component: like
      },
      {
        path: 'user',
        component: user
      }
    ]
  },
  { path: '/detail', component: detail },
  { path: '*', redirect: '/404' },
  { path: '/404', component: notFound }
]

// 4.创建router实例，然后传  `routes`配置
const router = new VueRouter({
  routes // 缩写 相当于 routes：routes
})

export default router
